<template>
  <div id="portalLayout" :class="[isGZT?'cleanBg':'']">
    <portal-header></portal-header>
    <div class="portal-content" :style="{'opacity':gisOpacity/100,'z-index':gisOpacity===0?-1:2}">
      <router-view />
    </div>
    <div class="gis-container" id="gisContainer" ref="gis">

    </div>
  </div>
</template>

<script>
import { PortalHeader, CardMarket } from '@/components'
import { mapGetters, mapMutations } from 'vuex'
import { initDojo } from './gisMap'
import store from '@/store/index'
export default {
  name: 'PortalLayout',
  components: { PortalHeader, CardMarket },
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    initDojo().then(async () => {
      console.log('INIT_MAP start')
      await store.dispatch('INIT_MAP')
      console.log('INIT_MAP end')
      next()
      // store.dispatch('INIT_MAP').then(() => {
      //   next()
      // })
    })
    // next()
  },
  data () {
    return {
      visible: false,
      isGZT: false
    }
  },
  watch: {
    // '$route.params': function (newVal, oldVal) {
    //   this.isGZT = !!(newVal && newVal.id === '1330813803371216898')
    // }
  },
  mounted () {
  },
  computed: {
    ...mapGetters({
      isSetting: 'portalSetStatus',
      gisOpacity: 'gisOpacity'
    })
  },
  methods: {
    ...mapMutations({
      destroyMap: 'DESTROY_MAP'
    }),
    log (msg) {
      console.log(msg)
    }
  },
  destroyed () {
    this.destroyMap()
  }
}
</script>

<style lang="less">
@import "./PortalLayout.less";
</style>
